import React, { CSSProperties } from 'react';
import { Badge, List } from 'antd';
import { Button, Layout, udp, useRefreshList } from '@cscec/udp-ui';
import { PortalTitle, containerStyle, useList } from '../common';
import type { IApprovePending } from '../portal';

const apiSource = {
  method: 'body',
  // url: '/workflow/portal/getPortalPendingTask',
  url: '/portal/pendingTask/queryTaskByUser',
  data: { status: 0 }
};

/** 描述信息节点 */
function Node({ title = '', text }: { title?: string; text?: string }) {
  if (text) {
    return (
      <div style={{ marginRight: 16 }}>
        {title}
        {text}
      </div>
    );
  }
  return null;
}

/** 描述信息 */
function Description({ item }: { item: IApprovePending }) {
  return (
    <Layout direction="row">
      <Node title="发起人：" text={item.startUserName} />
      <Node title="发起时间：" text={item.procInstStartTime} />
      <Node title="发起组织：" text={item.bizOrgName} />
    </Layout>
  );
}

export interface IProps {
  title: string;
  style?: CSSProperties;
  [x: string]: any;
}

/**
 * 审批待办
 */
export default function ApprovePending(props: IProps) {
  const { title, style, env } = props;

  const { list, loading, pagination, reload } = useList<IApprovePending>({
    env, source: apiSource,
  });

  const openUrl = ({ url, routeName, bizName }: IApprovePending) => () => {

    if (env?.session !== 'render') {
      return;
    }
    udp.open(url, {
      AppTitle: bizName ? `${bizName}-审批` : '流程任务办理',
      microAppName: routeName,
      code: udp.getQueryValue('code')
    });
  };

  useRefreshList(reload, 'MyWorkFlowTask');

  return (
    <div style={{ ...containerStyle, ...style }}>
      <PortalTitle>{title}<Badge count={pagination.total} style={{ color: '#999', marginLeft: 16 }} color="#d9d9d9" /></PortalTitle>
      <div style={{ minHeight: 165 }}>
        <List
          loading={loading}
          pagination={pagination}
          dataSource={list}
          renderItem={(item, index) => (
            <List.Item key={index} extra={<Button type="primary" onClick={openUrl(item)}>办理</Button>}>
              <List.Item.Meta
                title={(
                  <span>
                    {item.description}
                    <span style={{ marginLeft: 24 }}>{item.bizName || ''}</span>
                  </span>
                )}
                description={<Description item={item} />}
              />
            </List.Item>
          )}
        />
      </div>
    </div>
  );
}
